<table class="table table-condensed table-hover">
<tbody>
<tr>
    <th colspan="2" class="{{ {
        "P": "info",
        "p": "info",
        "T": "info",
        "R": "success",
        "S": "warning",
        "r": "danger",
        "C": "danger",
        "U": ""
    }.get(service.logical_status, '') }}">
        {{ service | service_title }}
        <span style="float: right">
            {{ service.logical_status | logical_status }}
            {{ current_duration }}
            ({{ service.logical_status_start | timestamp }})
        </span>
    </th>
</tr>
{% if errors %}
<tr>
    <td colspan="2" class="danger">
        <ul>
            {% for e in errors %}
                <li>{{ e }}</li>
            {% endfor %}
        </ul>
    </td>
</tr>
{% endif %}
<tr>
</tr>
{% if warnings %}
<tr>
    <td colspan="2" class="warning">
        <ul>
            {% for e in warnings %}
                <li>{{ e }}</li>
            {% endfor %}
        </ul>
    </td>
</tr>
{% endif %}
{% if maintenance %}
<tr>
    <th scope="row" class="col-sm-1">{{ _("Maintenance") }}</th>
    <td>
        <table>
            <thead>
                <tr>
                    <th class="col-sm-6">{{ _("Subject") }}</th>
                    <th class="col-sm-3">{{ _("Start") }}</th>
                    <th class="col-sm-3">{{ _("Stop") }}</th>
                </tr>
            </thead>
            <tbody>
                {% for m in maintenance %}
                <tr class="{{ {True: "danger", False: "warning"}[m["in_progress"]] }}">
                    <td><a href="/api/card/view/maintenance/{{ m["id"] }}/">{{ m["subject"] }}</a></td>
                    <td>{{ m["start"] | timestamp }}</td>
                    <td>{{ m["stop"] | timestamp }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </td>
<tr>
{% endif %}
<tr>
    <th scope="row" class="col-sm-1">{{ _("Services") }}</th>
    <td>
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th></th>
                    <th>{{ _("Service") }}</th>
                    <th>{{ _("Status") }}</th>
                </tr>
            </thead>
            <tbody>
                {% for s in services %}
                <tr>
                    <td>{% if s.id == service.id %}<i class="fa fa-arrow-right"></i>{% endif %}</td>
                    <td> {{ "".join(["&nbsp;&nbsp;&nbsp;&nbsp;"] * s._level) }}
                        <a href="/api/card/view/service/{{ s.id }}/">{{ s | service_title }}</a>
                    </td>
                    <td>{{ s.logical_status | logical_status }}</td>
                </th>
                {% endfor %}
            </tbody>
        </table>
    </td>
</tr>
<tr>
    <th scope="row">{{ _("Address") }}</th>
    <td>{{ service.address }}</td>
</tr>
<tr>
    <th scope="row">{{ _("Subscriber") }}</th>
    <td>
        {% if service.subscriber.profile.glyph %}
        <i class="{{ service.subscriber.profile.glyph }}"></i>
        {% endif %}
        {{ service.subscriber.name }}
    </td>
</tr>
<tr>
    <th scope="row">{{ _("Contacts") }}</th>
    <td>
        {{ service.subscriber.tech_contact_person }},
        {{ service.subscriber.tech_contact_phone }}
    </td>
</tr>
{% if service.description %}
<tr>
    <th scope="row">{{ _("Comment") }}</th>
    <td>{{ service.description }}</td>
</tr>
{% endif %}
{% if interface %}
<tr class="{{ {'up': 'success', 'alarm': 'warning', 'down': 'danger'}[managed_object_status] }}">
    <th scope="row">{{ _("Connection") }}</th>
    <td>
        <a href="/api/card/view/managedobject/{{ managed_object.id }}/">{{ managed_object | managed_object_title }}</a>
        ({{ managed_object.platform }}, {{ managed_object.address }})
        <br/><small>@todo: Container</small>
        {% if alarms %}
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>{{ _("Timestamp") }}</th>
                    <th>{{ _("Duration") }}</th>
                    <th>{{ _("Subject") }}</th>
                </tr>
            </thead>
            <tbody>
                {% for a in alarms %}
                <tr>
                    <td><a href="/api/card/view/alarm/{{ a.id }}/">{{ a.timestamp | timestamp}}</a></td>
                    <td>{{ a.duration }}</td>
                    <td>{{ a.subject }}</td>
                </td>
                {% endfor %}
            </tbody>
        </table>
        {% endif %}
    </td>
</tr>
<tr class="{{ {True: 'success', False: 'danger'}[interface.oper_status] }}">
    <th scope="row">{{ _("Port") }}</th>
    <td>
        {{ interface.name }}
        {% if interface.oper_status %}
            ({{ interface.speed }}M/{{ {True: "Full", False: "Half"}[interface.full_duplex] }})
        {% endif %}
    </td>
</tr>
{% endif %}
<tr>
    <th scope="row">{{ _("CPE") }}</th>
    <td></td>
</tr>
<tr>
    <th scope="row">{{ _("Terminator") }}</th>
    <td></td>
</tr>
{% if interface %}
<tr>
    <th scope="row">{{ _("Session") }}</th>
    <td id="session-data">
        <i class="fa fa-spinner fa-spin"></i> <span class="text-muted">Getting data...</span>
    </td>
</tr>
{% endif %}
<tr>
    <th scope="row">{{ _("TT") }}</th>
    <td></td>
</tr>
</tbody>
</table>

{% if interface %}
<script>
$(document).ready(
    $.ajax("/api/card/view/subscribersession/{{ interface.id }}/").done(
        function(data) {
            $("#session-data").html(data);
        }
    ).fail(function() {
        $("session-data").html("Failed to get data");
    })
);
</script>
{% endif %}
